import React, { useState, useEffect, useContext } from 'react'
import {Swiper, SwiperSlide} from 'swiper/react'

// 导入axios context
import axiosContext from '@/hooks/axiosContext'

// 导入http hooks
import useFetch from '@/hooks/useFetch'

import SwiperCore, { Autoplay } from 'swiper'

// Import Swiper styles
import 'swiper/swiper-bundle.min.css'

import {
  SwiperWrapper
} from './styledHome'

SwiperCore.use([Autoplay])

export default function MySwiper() {
  const axios = useContext(axiosContext)
  const http = useFetch(axios)
  const [swiperList, setSwiperList] = useState([])

  useEffect(() => {
    // useEffect定义的第一个参数不能为async函数
    // (async () => {
    //   let result = await axios.get('/swiper')
    //   console.log(result)
    // })()

    (async ()=>{
      let result = await http.current.get({ url: '/swiper' })
      setSwiperList(result.data)
    })()
  }, [http])

  return (
    <SwiperWrapper>
      <Swiper
        spaceBetween={20}
        autoplay
        loop
      >
        {
          swiperList.map(item => {
            return (
              <SwiperSlide key={item.id}>
                <div>
                  <img src={item.img} alt="" />
                </div>
              </SwiperSlide>
            )
          })
        }
      </Swiper>
    </SwiperWrapper>
  )
}
